<template>
	<!-- pages/chat/chat.wxml -->
	<view class="container">
		<scroll-view class="message-container" :scroll-y="true" :scroll-into-view="scrollToMessageId">
			<!-- 社区助手 -->
			<view class="message-list" v-if="comm.length!=0" v-for="(v,k) in comm" :key="k" @click="link('/comm/trendsinfo/trendsinfo?id='+v.commid)">
				<view class="itme">{{v.datetime}}</view>
				<view class="box">
					<view class="title">社区消息</view>
					<view class="text">
						{{v.msg}}
					</view>
					<view class="bottom">
						<text>详情</text>
						<view class="right">
							<uv-icon name="arrow-right" color="#000" size="18"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 通讯录助手 -->
			<view class="message-list" v-if="assistant.length!=0" v-for="(v,k) in assistant" :key="k" @click="link('/comm/txlindex/txlindex?id='+v.txlid)">
				<view class="itme">{{v.datetime}}</view>
				<view class="box">
					<view class="title">{{v.title}}</view>
					<view class="text">
						{{v.msg}}
					</view>
					<view class="bottom">
						<text>详情</text>
						<view class="right">
							<uv-icon name="arrow-right" color="#000" size="18"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 系统消息 -->
			<view class="message-list" v-if="system.length!=0" v-for="(v,k) in system" :key="k" @click="link('/comm/txlindex/txlindex?id='+v.txlid)">
				<view class="itme">{{v.datetime}}</view>
				<view class="box">
					<view class="title">{{v.title}}</view>
					<view class="text">
						{{v.msg}}
					</view>
					<view class="bottom">
						<text>通讯录验证</text>
						<view class="right" v-if="v.accept_reject=='1'">
							<view class="is" @click="setData('Y',v.msgid)">同意</view>
							<view class="is" @click="noSys(v.msgid)">不同意</view>
						</view>
						<view class="right" v-else>
							<text>{{v.msg2}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="message-list" v-if="friendmsg.length!=0" v-for="(v,k) in friendmsg" :key="k">
				<view class="itme">{{v.datetime}}</view>
				<view class="box">
					<view class="title">{{v.title}}</view>
					<view class="text">
						{{v.msg}}
					</view>
					<view class="bottom">
						<text>好友验证</text>
						<view class="right" v-if="v.status=='1'">
							<view class="new" @click="link('/comm/new/new?id='+v.userbid)">给Ta发消息</view>
						</view>
						<view class="right" v-else-if="v.status=='9'">
							<text>已拒绝</text>
						</view>
						<view class="right" v-else-if="v.msgtype=='tome'">
							<view class="is" @click="setData('Y',v.msgid)">同意</view>
							<view class="is" @click="noSys(v.msgid)">不同意</view>
						</view>
						<view class="right" v-else-if="v.msgtype=='meto'">
							<text>等待朋友验证</text>
						</view>
					</view>
				</view>
			</view>
			<view class="message-bottom" @click="deleLink" id="bottom">清空消息</view>
		</scroll-view>
		<view class="nobox" v-if="sysShow">
			<view class="bj"></view>
			<view class="box">
				<view class="title">拒绝的理由</view>
				<textarea v-model="reason" placeholder="请输入拒绝的理由"></textarea>
				<view class="bottom">
					<view class="item" @click="setData('N',sysId)">提交</view>
					<view class="item" @click="sysShow = false">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {link} from '@/utils/utils.js'
	import {
		ref
	} from 'vue'
	import {
		homeApi
	} from "@/api/index"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const scrollToMessageId = ref('')
	onLoad((open) => {
		t.value = open.t
		getData()
	})
	const t = ref('')
	const comm = ref([])
	const assistant = ref([])
	const system = ref([])
	const friendmsg = ref([])
	const getData = async()=>{
		let data = {
			do:'txl'+t.value
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlmsgcomm') {
				comm.value = res.columns[i].comm?res.columns[i].comm:[]
			}
			if (res.columns[i].name == 'txlmsgassistant') {
				assistant.value = res.columns[i].assistant?res.columns[i].assistant:[]
			}
			if (res.columns[i].name == 'txlmsgsystem') {
				system.value = res.columns[i].system?res.columns[i].system:[]
			}
			if (res.columns[i].name == 'txlmsgnewfriend') {
				friendmsg.value = res.columns[i].friendmsg?res.columns[i].friendmsg:[]
			}
		}
		setTimeout(()=>{
			scrollToMessageId.value = 'bottom'
		},200)
	}
	const reason = ref('')
	const setData = async(is,id)=>{
		let data = {
			accept:is,
			msgid:msgid,
			reason:reason.value
		}
		let res = await homeApi.publicPost(data,`txl${t.value}acceptreject`)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == `txl${t.value}acceptreject`) {
				if(res.columns[i].statuscode=='200'){
					uni.showToast({
						title: '操作成功',
						icon: 'none',
						duration: 2000
					});
					getData()
				}else{
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
	const sysShow = ref(false)
	const sysId = ref('')
	const noSys = (id)=>{
		sysId.value = id
		sysShow.value = true
	}
	
	const deleLink = ()=>{
		uni.showModal({
			title: "提示",
			content: "确认要清空吗",
			success(res) {
				if(res.confirm){
					dele()
				}
			},
		});
	}
	const dele = async()=>{
		let data = {
			do:`txl${t.value}clear`
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == `txl${t.value}clear`) {
				if(res.columns[i].statuscode=='200'){
					uni.showToast({
						title: '操作成功',
						icon: 'none',
						duration: 2000
					});
					getData()
				}else{
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/chat/chat.wxss */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.message-container {
		width: calc(100% - 60rpx);
		height: 100%;
		padding:0 30rpx;
		background-color: #ebecf5;
	}

	.message-list {
		width: 100%;
		.itme{
			width: 100%;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #71747d;
		}
		.box{
			width: calc(100% - 40rpx);
			padding:20rpx;
			background: #fff;
			border-radius: 8px;
			.title{
				padding-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
			.text{
				font-size: 28rpx;
				color: #747474;
				text{
					color: #f00;
				}
				padding-bottom: 20rpx;
			}
			.bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;
				border-top: 1px solid #ebecf5;
				text{
					font-size: 28rpx;
					font-weight: bold;
				}
				.right{
					display: flex;
					align-items: center;
					.is{
						padding: 10rpx 20rpx;
						background: #ff7022;
						color: #fff;
						border-radius: 4px;
						margin-left: 20rpx;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.is:nth-child(2){
						background: #71747d;
					}
					.new{
						padding: 10rpx 20rpx;
						background: #ff7022;
						color: #fff;
						border-radius: 4px;
						margin-left: 20rpx;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 10rpx 20rpx;
						background: #ff7022;
						color: #fff;
						border-radius: 4px;
						margin-left: 20rpx;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					text{
						font-size: 28rpx;
						color: #888;
					}
				}
			}
		}
	}
	.message-bottom{
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999;
	}
	
	.nobox{
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.bj{
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .2);
		}
		.box{
			position: absolute;
			width: 90%;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 8rpx;
			background: #fff;
			.title{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: bold;
			}
			textarea{
				width:calc(100% - 90rpx);
				padding: 20rpx;
				height: 150rpx;
				border-radius: 8px;
				background: #efefef;
			}
			.bottom{
				width: 100%;
				height: 100rpx;
				margin-top: 20rpx;
				display: flex;
				border-top:1px solid #eeeeee;
				.item{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					border-left: 1px solid #eeeeee;
				}
				.item:nth-child(1){
					border-left: none;
					color: #ff7022;
				}
			}
		}
	}
</style>